<script setup lang="ts">
  import { PropType, ref, watch } from 'vue'
  import { SingleSelectConfig } from '@/views/order/custom/hooks/types'
  import { useTemplateForm } from '@/views/order/custom/hooks/useTemplate'
  import _ from 'lodash'

  defineOptions({
    name: 'CustomSingleSelectUpdateVisibleRuleModal',
  })

  const props = defineProps({
    templateId: {
      type: String,
      required: true,
    },
    options: {
      type: Array as PropType<SingleSelectConfig['options']>,
      required: true,
    },
    modelValue: {
      type: Array as PropType<SingleSelectConfig['beControlVisibleRules']>,
      default: () => [],
    },
  })

  const emits = defineEmits<{
    (e: 'update:modelValue', value: SingleSelectConfig['beControlVisibleRules']): void
    (e: 'confirm'): void
  }>()

  const { componentList } = useTemplateForm()

  const visible = defineModel('visible', { type: Boolean, default: false })
  const _modelValue = ref<SingleSelectConfig['beControlVisibleRules']>([])

  const onAddBtnClick = () => {
    _modelValue.value.push({
      componentId: '',
      optionValue: '',
    })
  }

  const handleDelClick = (ruleIndex: number) => {
    _modelValue.value.splice(ruleIndex, 1)
  }

  const hideDialog = () => {
    visible.value = false
    _modelValue.value.length = 0
  }

  const onConfirmClick = () => {
    emits('update:modelValue', _.cloneDeep(_modelValue.value))
    emits('confirm')
    hideDialog()
  }

  watch(visible, (value) => {
    if (value) {
      _modelValue.value = props.modelValue
    }
  })
</script>

<template>
  <h-dialog v-model="visible" title="设置显隐规则" @close="hideDialog">
    <div class="container">
      <div class="add-btn" @click="onAddBtnClick">
        <i class="iconfont icon-tianjia"></i>
        添加显隐规则
      </div>
      <div class="rule-list">
        <div v-for="(rule, ruleIndex) in _modelValue" :key="ruleIndex" class="rule-item">
          选择
          <el-select v-model="rule.optionValue">
            <el-option
              v-for="(option, optionIndex) in props.options"
              :key="optionIndex"
              :value="option.value"
              :label="option.label"
            />
          </el-select>
          时，显示
          <el-select v-model="rule.componentId" :disabled="!rule.optionValue">
            <el-option
              v-for="(component, componentIndex) in componentList.filter(
                (item) => item.type !== 'divider',
              )"
              :key="componentIndex"
              :label="component.label"
              :value="component.id"
            />
          </el-select>
          <i class="iconfont icon-shanchu2" @click="handleDelClick(ruleIndex)"></i>
        </div>
      </div>
    </div>
    <template #footer>
      <h-button is-modal type="primary" @click="onConfirmClick">确定</h-button>
      <h-button is-modal @click="hideDialog">取消</h-button>
    </template>
  </h-dialog>
</template>

<style scoped lang="scss">
  .container {
    display: flex;
    flex-direction: column;
    row-gap: 24px;

    .add-btn {
      color: #007cff;
      display: flex;
      align-items: center;
      font-size: 14px;
      column-gap: 2px;
      cursor: pointer;
      width: fit-content;
    }

    .rule-list {
      display: flex;
      flex-direction: column;
      row-gap: 12px;

      .rule-item {
        display: flex;
        font-size: 14px;
        align-items: center;
        white-space: nowrap;
        column-gap: 8px;

        .iconfont {
          color: gray;
          cursor: pointer;

          &:hover {
            color: #f56c6c;
          }
        }
      }
    }
  }
</style>
